
<template>
	<view>
		<!-- 提示信息弹窗 2秒后消失-->
		<!-- msgType：top、center、bottom、left、right、message、dialog、share -->
		<view @click="itemClick('mask')" class="mask-content">
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="info.msgType" :message="info.messageText"
					:duration="info.duration"></uni-popup-message>
			</uni-popup>
		</view>
		<!-- 加载弹窗 -->
		<uni-popup ref="popupLoading" :is-mask-click="false">
			<view class="popup-content"><text
					class="cu-load load-cuIcon loading text-white">{{info.popupContent}}</text>
			</view>
		</uni-popup>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="info.msgType" :cancelText="info.cancelText" :confirmText="info.confirmText"
				:title="info.title" :content="info.content" @confirm="itemClick('confirm')" @close="itemClick('cancel')"
				:duration="info.duration"></uni-popup-dialog>
		</uni-popup>
		<!-- 自定义提示框 -->
		<view @click="itemClick('mask')" class="mask-content" v-if="info.isShow">
			<view class="dialog-content" @click.stop="">
				<view class="head-content " v-if="info.title" :style="info.content?'':'min-height:90rpx;padding:30rpx'">
					<text>{{info.title}}</text>
				</view>
				<scroll-view class="main-content" scroll-y v-if="info.content">
					<view class="info-content">
						<text>{{info.content}}</text>
					</view>
				</scroll-view>
				<view class="foot-content alert" v-if="'alert'==info.dialogType">
					<view class="btn active" @click.stop="itemClick('confirm')">
						{{info.confirmText}}
					</view>
				</view>
				<view class="foot-content confirm" v-if="'confirm'==info.dialogType">
					<view class="btn cancel" @click="itemClick('cancel')">
						{{info.cancelText}}
					</view>
					<view class="btn active" @click.stop="itemClick('confirm')">
						{{info.confirmText}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: 'Dialog',
		data() {
			return {
				info: {
					//消息提示
					msgType: 'success', //error、warn、info
					messageText: '',
					//确认框
					content: "",
					title: this.$t('system.Hint'),
					duration: 2000,
					cancelText: this.$t('system.cancel'),
					confirmText: this.$t('system.affirm'),
					dialogType: "", //弹窗类型 0：确认框  1:消息提示  2： 加载框
					popupContent: "加载中....",
					isShow: false,
					isMaskClose: "1", //1点击遮罩层关闭弹窗
				}
			}
		},
		onLoad(info = {}) {
			this.info = {
				...this.info,
				...info
			};
			this.getParams(this.info);
		},
		onUnload() {
			this.popupLoadingClose();
			this.info.dialogType = "";
		},
		methods: {
			getParams(options) {
				switch (options.dialogType) {
					case "dialogOpen":
						this.dialogOpen();
						break;
					case "messageOpen":
						this.messageOpen();
						break;
					case "popupLoadingOpen":
						this.popupContent = options.popupContent;
						this.popupLoadingOpen();
						break;
					case "popupLoadingClose":
						this.popupContent = options.popupContent;
						this.popupLoadingClose();
						break;
					default:
						break;
				}
			},
			/**
			 * 确认框方法
			 */
			dialogOpen() {
				this.$nextTick(() => {
					this.$refs.alertDialog.open();
				})
			},
			/**
			 * 消息提示框方法
			 */
			messageOpen() {
				if (this.info.dialogType == "messageOpen") {
					this.$nextTick(() => {
						if(this.$refs.message){
							this.$refs.message.open();
							this.setTimeOut = setTimeout(() => {
								uni.navigateBack()
							}, this.info.duration)
						}
					});
				}
			},
			/**
			 * 加载框方法
			 */
			popupLoadingOpen() {
				this.$nextTick(() => {
					this.$refs.popupLoading.open('center');
				});
			},
			/**
			 * 废弃，页面路由使用不上
			 * 直接使用uni.navigateBack()
			 */
			popupLoadingClose() {
				this.$refs.popupLoading.close();
			},
			itemClick(type) {
				if (type == "mask" && this.info.isMaskClose != '1') {
					return;
				}
				//解决消息提示的自动消失返回的bug
				if (this.setTimeOut)
					clearTimeout(this.setTimeOut);
				uni.navigateBack();
				uni.$emit("zy_common_dialog", type);
			}
		}
	};
</script>
 
<style lang="scss">
	$btncolor: #0081ff;
 
	page {
		background: transparent;
	}
 
	.mask-content {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
 
		.dialog-content {
			background-color: #FFFFFF;
			width: 580rpx;
			border-radius: 10rpx;
 
			.head-content {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #343434;
				font-weight: bold;
				font-size: 32rpx;
				padding: 20rpx 30rpx;
			}
 
			.main-content {
				max-height: 330rpx;
 
				.info-content {
					min-height: 80rpx;
					padding: 10rpx 30rpx;
					color: #636463;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
 
			.foot-content {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 110rpx;
 
				.btn {
					font-size: 28rpx;
					border-radius: 66rpx;
					height: 66rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
 
				&.alert {
					.btn {
						background-color: $btncolor;
						color: #FFFFFF;
						font-size: 28rpx;
						border-radius: 60rpx;
						height: 66rpx;
						width: 300rpx;
						padding: 0 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
 
				&.confirm {
					justify-content: space-around;
 
					.btn {
						min-width: 230rpx;
 
						&.active {
							background-color: $btncolor;
							color: #FFFFFF;
						}
 
						&.cancel {
							border: 1rpx solid $btncolor;
							color: $btncolor;
							border-radius: 66rpx;
						}
					}
				}
 
			}
		}
	}

</style>